<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <link href="bootstrap.css" rel="stylesheet">  
  <style>

  .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }

  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }

  </style>

</head>
<body>
<svg width="960" height="600"></svg>
<script src="./d3.v4.min.js"></script>

<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
function update(){

  d3.json("miserables.json", function(error, graph) {
      
    function check(s){
      _nodes = s.nodes;
      _links = s.links;
      _nodes.forEach(function(d,i){
        if (d3.select("#" + d.id.replace(".","_")).empty()) {
          console.log(d,i);
          
        }else{
          graph.nodes.pop(d);
        }
      });

      _links.forEach(function(d){
        s = d.source.replace(".", "_")
        t = d.target.replace(".", "_")
        if (d3.select("#" + s + "-" + t).empty()) {
          
        }else{
          // console.log(d);
          graph.links.pop(d);
        } 
      });
    }
  
  check(graph);
  console.log( graph.links.length, graph.nodes.length)

    if (error) throw error;

    var link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
      .attr("id",function(d){
        s = d.source.replace(".", "_")
        t = d.target.replace(".", "_")
        return s + '-' + t ;
      })
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
    link.exit().remove();

    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("r", function(d){
        return 5 ;
      })
      .attr("id", function(d){
        // console.log(d.id);
        return d.id.replace(".", "_");
      })
      .attr("fill", function(d) { return color(d.group); 
      })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  
    node.exit().remove();
      // .call(d3.drag()
      //     .on("start", dragstarted)
      //     .on("drag", dragged)
      //     .on("end", dragended));
    imgs = []
    graph.nodes.forEach(function(d){
      if(d.group == 1){
        imgs.push(d);
        // console.log(d);
      }
    });

    var image = svg.selectAll("image")
      .data(imgs)
      .enter()
      .append("image")
      // .attr("x",)
      // .attr("y",200)
      .attr("width",30)
      .attr("height",30)
      .attr("class","img-circle")
      .attr("xlink:href","x.png");


    node.append("title")
      .text(function(d) { return d.id; });

    simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

    simulation.force("link")
      .links(graph.links);

    function ticked() {
      link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
      node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
      image
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
    }
  });
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  // if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = d.event.x;
  d.fy = d.event.y;
}

// setInterval(function(){
  update()
  // },3000)

</script>
</body>
</html>